<br/>

<div root-access>
    <progress-spinner ng:hide="config.data != null"></progress-spinner>

    <div class="list-group">
        <div ng:repeat="(username, user) in config.data.auth.users" class="list-group-item list-group-item-large" ng:show="!user.hidden">
            <a class="list-group-btn" ng:click="removeUser(username)">
                <i class="fa fa-trash-o"></i>
            </a>
            <a class="list-group-btn" ng:click="$parent.configuringUsername = username" title="{{'Configure'|translate}}">
                <i class="fa fa-cog"></i>
            </a>
            <div class="list-group-main">
                <div class="list-group-icon">
                    <i class="fa fa-user"></i>
                </div>
                <h4 class="list-group-item-heading">
                    {{username}}
                </h4>
                <p class="list-group-item-text" ng:show="customization.plugins.auth_users.forceUID == null">
                    {{getSystemUser(user.uid).name}} ({{user.uid}})
                </p>
            </div>
        </div>
    </div>

    <div class="input-group">
        <input ng:model="newUsername" ng:enter="addUser(newUsername)" placeholder="{{'New user name'|translate}}" class="form-control" />
        <div class="input-group-btn">
            <a ng:click="addUser(newUsername)" ng:disabled="!newUsername" class="btn btn-primary" translate>Create</a>
        </div>
    </div>

    <br/>

    <div class="alert alert-danger" ng:show="isDangerousSetup()">
        <i class="fa fa-warning"></i> <span translate>You have no users mapped to <b>root</b> system account. Saving this configuration will prevent any administrative access.</span>
    </div>

    <div class="alert alert-info" ng:show="config.data.auth.users.root.password == defaultRootPassword">
        <i class="fa fa-info-circle"></i> <span translate>Default root password is <code>admin</code></span>.
    </div>

    <div class="floating-toolbar-padder"></div>

    <floating-toolbar>
        <a ng:click="save()" class="btn btn-default btn-flat" translate>Save</a>
    </floating-toolbar>

    <dialog ng:show="configuringUsername">
        <div class="modal-header">
            <h4>{{configuringUsername}}</h4>
        </div>
        <div class="modal-body scrollable">
            <div class="form-group" ng:show="customization.plugins.auth_users.forceUID == null">
                <label translate>System account</label>
                <select ng:model="config.data.auth.users[configuringUsername].uid" ng:options="x.uid as x.name for x in systemUsers" class="form-control"></select>
                <div class="alert alert-info" ng:show="config.data.auth.users[configuringUsername].uid != 0">
                    <i class="fa fa-info-circle"></i> <span translate>This user will be constrained by POSIX permissions for the selected system account.</span>
                </div>
            </div>
            <div class="form-group">
                <label translate>New password</label>
                <div class="input-group">
                    <input ng:model="newPassword" ng:enter="setPassword(configuringUsername, newPassword)" class="form-control" />
                    <div class="input-group-btn">
                        <a ng:click="setPassword(configuringUsername, newPassword)" ng:disabled="!newPassword" class="btn btn-primary" translate>Update password</a>
                    </div>
                </div>
            </div>
            <uib-tabset>
                <uib-tab heading="{{'Sidebar entries'|translate}}">
                    <br/>
                    <div class="alert alert-warning">
                        <i class="fa fa-warning"></i> <span translate>This only affects appearance of the sidebar. Disable actual permissions under the <b>Permissions</b> tab.</span>
                    </div>

                    <div ng:repeat="permission in permissions|orderBy:'name'" ng:if="permission.id.indexOf('sidebar:view:') == 0">
                        <span checkbox ng:model="userPermissions[configuringUsername][permission.id]" text="{{permission.name|translate}}"></span>
                    </div>
                </uib-tab>
                <uib-tab heading="{{'Permissions'|translate}}">
                    <br/>
                    <div ng:repeat="permission in permissions|orderBy:'id'" ng:if="permission.id.indexOf('sidebar:view:') == -1">
                        <span checkbox ng:model="userPermissions[configuringUsername][permission.id]" text="{{permission.name|translate}}"></span>
                    </div>
                    <br/>
                    <div class="form-group">
                        <label translate>Filesystem root</label>
                        <path-selector ng:model="config.data.auth.users[configuringUsername].fs_root" mode="directory"></path-selector>
                    </div>
                </uib-tab>
            </uib-tabset>
        </div>
        <div class="modal-footer">
            <a ng:click="$parent.configuringUsername = null" class="btn btn-default btn-flat" translate>OK</a>
        </div>
    </dialog>
</div>
